<template>
  <div class=''>
    <div class='station-title'>站点统计图</div>
    <div class="flex j-c-c">
      <div id="station_chart" style="width: 80%; height: 400px; margin-top:100px" ></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons')
  export default {
    name: 'station',
    data() {
      return {
        station_chart_option: {
          xAxis: {
            type: "category",
            data: [1,2,3,4,5,6,7]
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            padding: [5, 10]
          },
          yAxis: {},
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            
          }]
        }
      }
    },
    created() {
  
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        let station_chart = echarts.init(document.getElementById('station_chart'), "macarons")
        station_chart.setOption(this.station_chart_option)
      }
    },
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
  .station-title {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    font-size: 35px;

  }
</style>